<!DOCTYPE html>
<html>
  <head>
    <title>navigator.MediaDevices.getUserMedia()</title>
    <meta charset="utf-8"/>
	<link rel="stylesheet" href="test.css">
  <body>
	  <div id="cont">
		  <div id="conference">
		  		  		  	<li><button>会议申请</button></li>
		  		  		  	<li><button>开始会议</button></li>
		  		  		  	<li><button>结束会议</button></li>
		  		  		  	<li><button id="show1">信息管理</button></li>
		  					<div id="msg">
								<h4>签到人员信息</h4>
								<ul id="namelist">
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
									<li></li>
								</ul>
		  					</div>
		  			</div>
		  <div id="Camera">
		  			<p>将人脸放入取景框中进行识别</p>
		  			<div id="line"></div>
		  			<video id="video" class="video" autoplay>
		  </video>     
		  <div id="box">
		  			<button id="btn">开始识别</button>
					<button id="refaces">录制人脸</button>
		  			<form action="">
		  				<h3>如果无法识别,请输入性名进行签到</h3>
		  				<span>输入姓名：</span>
		  				<input type="text" placeholder="请输入姓名" id="name" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"> 
		  				<input id="btn2" type="button" value="签到"/>
						<h3 id="h3">已签到人数：0</h3>
		  			</form>
		  </div>
		  <canvas id="canvas" style="height: 250px;width: 300px;"></canvas>
		  </div>
	  </div>
			
   <script>
	   var btn = document.getElementById("btn");
	   var btn2 = document.getElementById("btn2");
	   var name = document.getElementById("name");
	   var show = document.getElementById("show1");
	   var refaces = document.getElementById("refaces");
	   var time = new Date();
	   var newArr = [];
	   var arrname = [];
	   var nameadd = ["姜黎明","胖"];
	   var namelist = document.getElementById("namelist");
	   var li = document.getElementById("namelist").getElementsByTagName("li");
	   var msg = document.getElementById("msg");
	   var h2 = document.getElementById("h3");
    function Camera(){
   			let constraints = {
   			  video: { width: 500, height: 250 },
   			  audio: false
   			};
   			let video = document.getElementById("video");
   			let promise = navigator.mediaDevices.getUserMedia(constraints);
   			promise.then(function(MediaStream) {
   			  video.srcObject = MediaStream;
   			  video.play();
   			});
			btn.onclick = () => {
			let ctx = document.getElementById("canvas").getContext('2d')
			ctx.drawImage(document.getElementById("video"), 0, 0, 300, 250)
			// var text = document.getElementById("name").value = '姜黎明'; 
			//  if(text == nameadd[0]){
			//    alert("签到成功");
			//    li.innerText = text;
			//    msg.innerHTML = "<li>"+text+"</li>";
			//    document.getElementById("name").value = "";
			// }else{
			// 	alert("无法识别 请输入姓名进行签到");
			// }
			}
			refaces.onclick=function refaces(){
				var count = 0;
				bj = setInterval(function(){
					let ctx = document.getElementById("canvas").getContext('2d')
					ctx.drawImage(document.getElementById("video"), 0, 0, 300, 250)
					count ++;
					h2.innerHTML= "请保持"+ "&nbsp" + count + "S";
					if(count == 5){
					clearInterval(bj);
					h2.innerHTML = "已完成录制";
					}
				},1000)
				}
			btn2.onclick = function flag(){
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getMilliseconds();
				var timestr = h + ":" + m + ":" + s;
				var text = document.getElementById("name").value;
				var i = arrname.length;
				while(true){
					if(text != ""){
						arrname[i] = text;
		             for (var i = 0; i < arrname.length; i++) {
		                 if (newArr.indexOf(arrname[i]) === -1) {
		                     newArr.push(arrname[i]);
		                 }
		             }
					 i ++;
					 document.getElementById("name").value = "";
					 for(var i = 0;i < newArr.length;i ++){
							  li[i].innerText = newArr[i] ;
							  h2.innerHTML =("已签到人数：" +(i + 1) ); 
						 }
						  alert("签到成功");
						  break;
					}else{
						alert("非法输入");
						break;
					}
				}
				// if(text == nameadd[0]){
				//    alert("签到成功");
				//    li.innerText = newArr[0];
				//    document.getElementById("name").value = "";
				// }else if(text == nameadd[1]){
				//    alert("签到成功");
				//     console.log(nameadd[1]);
				// 	li.innerText = text;
				// 	msg.innerHTML = "<li>"+text+"</li>";
				//     document.getElementById("name").value = "";
				// }else if(text == nameadd[2]){
				//    alert("签到成功");
				//     console.log(nameadd[2]);
				// 	li.innerText = text;
				// 	msg.innerHTML = "<li>"+text+"</li>";
				//     document.getElementById("name").value = "";
				// }else{
				// 	alert("可能没有此用户记录或含有非法字符");
				//     document.getElementById("name").value = "";
				// }
			} 
				show.onclick=function dj(){
					if(msg.style.opacity == "1"){
					msg.style.opacity = "0";
					}else{
					msg.style.opacity = "1";
					}
				}
		}
			Camera();
   </script>
 
  </body>
</html>